<script setup>
defineProps({
  text: {
    type: String,
    default: ''
  }
})
</script>
<template>
  <van-overlay :show="true" class-name="ovelay" z-index="99999">
    <div class="vtu-loading" :style="{ top: 'calc(50% + ' + top + 'px)' }">
      <div class="loading-body">
        <!-- <div class="vtu-loading-img">
          <img src="../assets/img/loading.png" alt="" />
        </div> -->
        <van-loading :class="!text ? 'loading-text' : ''" text-color="#ffffff" size="34px" vertical>{{
          text
        }}</van-loading>
      </div>
    </div>
  </van-overlay>
</template>
<style lang="less" scoped>
.ovelay {
  --van-overlay-background-color: rgba(255, 255, 255, 0);
}
.downwarp-progress {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 3px solid #ffffff;
  border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
  border-right-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
  vertical-align: middle;
}
.rotate {
  animation: mescrollDownRotate 0.6s linear infinite;
}

@keyframes mescrollDownRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes mescrollDownRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.vtu-loading {
  text-align: center;
  width: 100%;
  top: calc(50% - 44px);
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;

  .loading-body {
    width: max-content;
    // height: 55px;
    margin: auto;
    border-radius: 6px;
    background-color: #323233;
    opacity: 0.7;
    padding: 12px;

    .loading-text {
      :deep(.van-loading__text) {
        margin: 0;
      }
    }
  }

  &.absolute {
    position: absolute;
  }

  .vtu-loading-img {
    width: 30px;
    height: 30px;
    margin: auto;

    img {
      width: 100%;
      height: 100%;
      animation: mescrollDownRotate 0.6s linear infinite;
    }
  }

  .vtu-loading-label {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
  }
}
</style>
